import React, { Component } from 'react';
import { connect } from 'dva';
import styles from './NoticeTable.less';
import Link from 'umi/link';

import { Table, Input, Button, Icon, DatePicker, Select } from 'antd';

const Search = Input.Search;
const Option = Select.Option;

@connect(({ regulationNotice }) => ({
  noticeList: regulationNotice.noticeList,
}))
class NoticeTable extends Component {
  state = {
    showAdvanced: true,
    title: '',
    source: '',
    dateStart: '',
    dateEnd: '',
    page_num: 1,
    page_size: 20,
    listData: {
      columns: [
        {
          title: '序号',
          dataIndex: 'key',
          key: 'key',
          render: (text, record, index) => <span> {index + 1} </span>,
        },
        {
          title: '标题',
          dataIndex: 'title',
          key: 'title',
          render: (title, record) => (
            <span>
              <a href={record.href} target="_blank">
                {title}
              </a>
            </span>
          ),
        },
        {
          title: '来源',
          dataIndex: 'source',
          key: 'source',
        },
        {
          title: '发布日期',
          dataIndex: 'published_time',
          key: 'published_time',
        },
      ],
    },
  };

  updateData(that) {
    const { dispatch } = that.props;
    dispatch({
      type: 'regulationNotice/queryNoticeList',
      payload: {
        title: that.state.title,
        source: that.state.source,
        dateStart: that.state.dateStart,
        dateEnd: that.state.dateEnd,
        page_num: that.state.page_num,
        page_size: that.state.page_size,
      },
    });
  }

  componentDidMount() {
    this.setState({ loading: false });
    this.updateData(this);
  }

  render() {
    let { noticeList, dispatch } = this.props;
    const that = this;

    const pager = {
      total: noticeList.totalCount,
      current: this.state.page_num,
      pageSize: this.state.page_size,
      onChange: page => {
        that.setState({ page_num: page }, () => {
          that.updateData(that);
        });
      },
    };

    let showAdvancedOptions = () => {
      if (this.state.showAdvanced)
        return (
          <div className={styles.advancedContainer}>
            <Select
              defaultValue="全部来源"
              size="large"
              className={styles.advancedOption + ' ' + styles.rightMarginBig}
              onChange={value => {
                that.setState({ source: value });
              }}
            >
              <Option value="全部来源">全部来源</Option>
              <Option value="中国证监会">中国证监会</Option>
              <Option value="上交所">上交所</Option>
              <Option value="深交所">深交所</Option>
            </Select>
            <DatePicker
              placeholder="发布日期（起始）"
              className={styles.advancedOption + ' ' + styles.rightMarginBig}
              size="large"
              onChange={(date, dateString) => {
                that.setState({ dateStart: dateString });
              }}
            />
            <DatePicker
              placeholder="发布日期（结束）"
              className={styles.advancedOption}
              size="large"
              onChange={(date, dateString) => {
                that.setState({ dateEnd: dateString });
              }}
            />
          </div>
        );
    };

    return (
      <div className={styles.outerWidthLim}>
        <div className={styles.breadCrumbContainer}>
          <Link to="/Law/ListContent">
            <div className={styles.breadCrumbButton}>最新政策</div>
          </Link>
          <Link to="/Law/NoticeTable">
            <div className={styles.breadCrumbButton + ' ' + styles.breadCrumbButtonActive}>
              监管通知公告
            </div>
          </Link>
          <Link to="/Law/SearchCollection/regulatoryLetters">
            <div className={styles.breadCrumbButton}>检索收藏</div>
          </Link>
        </div>
        <div className={styles.mainContentContainer}>
          <div className={styles.searchContainer}>
            <Search
              className={styles.searchBox}
              placeholder="请输入关键词"
              enterButton="搜索"
              size="large"
              onSearch={(value, event) => {
                that.setState(
                  {
                    title: value,
                  },
                  () => {
                    that.updateData(that);
                  }
                );
              }}
            />
            <Button
              className={styles.searchAdvancedButton}
              type="primary"
              onClick={() => {
                this.setState({ showAdvanced: !this.state.showAdvanced });
              }}
            >
              高级
              <Icon type={this.state.showAdvanced ? 'caret-down' : 'caret-up'} />
            </Button>
            {showAdvancedOptions()}
          </div>
          <Table
            columns={this.state.listData.columns}
            dataSource={noticeList.data_list}
            pagination={pager}
            bordered
          />
        </div>
      </div>
    );
  }
}

export default NoticeTable;
